<template>
  <div>
    <div class="epidemicDiv">
      <div>
        <span class="spanDiv">全国疫情统计 截至 {{ time }}</span>
        <div>
          <el-row :gutter="150">
            <el-col :span="6"
              ><div class="grid-content">现有确诊</div>
              <div class="sizeDiv" style="color: #ff6a57">1325</div>
              <div class="numDiv" style="color: #ff6a57">昨日+7</div>
            </el-col>
            <el-col :span="6"
              ><div class="grid-content">无症状</div>
              <div class="sizeDiv" style="color: #e86d48">458</div>
              <div class="numDiv" style="color: #e86d48">昨日+57</div></el-col
            >
            <el-col :span="6"
              ><div class="grid-content">现有疑似</div>
              <div class="sizeDiv" style="color: #ec9217">0</div>
              <div class="numDiv" style="color: #ec9217">昨日+0</div></el-col
            >
            <el-col :span="6"
              ><div class="grid-content">现有重症</div>
              <div class="sizeDiv" style="color: #545499">13</div>
              <div class="numDiv" style="color: #545499">昨日+0</div></el-col
            >
          </el-row>
        </div>
      </div>
    </div>
    <div>
      <el-button-group>
        <el-button
          type="primary"
          size="max"
          @click="Tojump2"
          icon="el-icon-arrow-left"
          >累计确诊</el-button
        >
        <el-button type="primary" size="max" @click="Tojump"
          >现有确诊<i class="el-icon-arrow-right el-icon--right"></i
        ></el-button>
      </el-button-group>
    </div>
    <div v-if="!disvision" id="currenAdd"></div>
    <div v-else id="currenAddTwo"></div>
    <div id="current"></div>
    <div id="current1"></div>
  </div>
</template>

<script>
let echarts = require("echarts");
import "../libs/china";
import data from "../libs/epidemic";
import currentdata from "../libs/currentepidemic";
import epidemictime from "../libs/epidemictime";
import epidemiccured from "../libs/epidemiccured";
import epidemicdiagnosed from "../libs/epidemicdiagnosed";

let moment = require("moment");
export default {
  data() {
    return {
      epidemicCured: [],
      epidemicDiagnosed: [],
      epidemicTime: [],
      time: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
      disvision: false,
      weatherIcons: {
        Hebei: require("./image/hebei.png"),
        Liaoning: require("./image/liao.png"),
        Shanxi: require("./image/shan.png"),
      },
      seriesLabel: {
        normal: {
          show: true,
          textBorderColor: "#333",
        },
      },
      currentepidemicData: [],
      epidemicData: [],
    };
  },
  computed: {},
  methods: {
    moment,
    Tojump2() {
      this.disvision = false;
      setTimeout(() => {
        this.toDrawOne();
      });
    },
    Tojump() {
      this.disvision = true;
      setTimeout(() => {
        this.toDrawOne2();
      });
    },
    getOptionOne() {
      return {
        title: {
          text: "全国累计确诊疫情地图",
          subtext: "",
          x: "center",
        },
        tooltip: {
          trigger: "item",
        },
        //左侧小导航图标
        visualMap: {
          show: true,
          x: "left",
          y: "center",
          splitList: [
            { start: 5000, end: 100000 },
            { start: 1000, end: 5000 },
            { start: 800, end: 1000 },
            { start: 600, end: 800 },
            { start: 400, end: 600 },
            { start: 100, end: 400 },
            { start: 0, end: 100 },
          ],
          // color: ['#5475f5', '#9feaa5', '#85daef', '#74e2ca', '#e6ac53', '#9fb5ea']
          color: [
            "#F44A43",
            "#F77C67",
            "#FA997D",
            "#FCAE8C",
            "#FDCAA0",
            "#FFE6B3",
          ],
        },
        //配置属性
        series: [
          {
            name: "数据",
            type: "map",
            mapType: "china",
            // roam: true,
            label: {
              normal: {
                show: true, //省份名称
              },
              emphasis: {
                show: false,
              },
            },
            data: this.epidemicData, //数据
          },
        ],
      };
    },
    getOptionOne2() {
      return {
        title: {
          text: "全国现有确证疫情地图",
          subtext: "",
          x: "center",
        },
        tooltip: {
          trigger: "item",
        },
        //左侧小导航图标
        visualMap: {
          show: true,
          x: "left",
          y: "center",
          splitList: [
            { start: 100, end: 200 },
            { start: 80, end: 100 },
            { start: 60, end: 80 },
            { start: 40, end: 60 },
            { start: 20, end: 40 },
            { start: 10, end: 20 },
            { start: 1, end: 10 },
          ],
          // color: ['#5475f5', '#9feaa5', '#85daef', '#74e2ca', '#e6ac53', '#9fb5ea']
          color: [
            "#F44A43",
            "#F77C67",
            "#FA997D",
            "#FCAE8C",
            "#FDCAA0",
            "#FFE6B3",
          ],
        },
        //配置属性
        series: [
          {
            name: "数据",
            type: "map",
            mapType: "china",
            // roam: true,
            label: {
              normal: {
                show: true, //省份名称
              },
              emphasis: {
                show: false,
              },
            },
            data: this.currentepidemicData, //数据
          },
        ],
      };
    },
    getOptionTwo() {
      return {
        title: {
          text: "最新确诊和无症状、境外分布",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["新增确诊", "境外输入", "无症状感染者"],
        },
        grid: {
          left: 70,
          top: 50,
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "value",
          name: "number",
          min: 0,

          axisLabel: {
            formatter: "{value}",
          },
        },
        yAxis: {
          type: "category",
          inverse: true,
          data: ["Hebei", "Liaoning", "Shanxi"],
          axisLabel: {
            formatter: function (value) {
              return "{" + value + "| }\n{value|" + value + "}";
            },
            margin: 20,
            rich: {
              value: {
                lineHeight: 30,
                align: "center",
              },
              Hebei: {
                height: 40,
                align: "center",
                backgroundColor: {
                  image: this.weatherIcons.Hebei,
                },
              },
              Liaoning: {
                height: 40,
                align: "center",
                backgroundColor: {
                  image: this.weatherIcons.Liaoning,
                },
              },
              Shanxi: {
                height: 40,
                align: "center",
                backgroundColor: {
                  image: this.weatherIcons.Shanxi,
                },
              },
            },
          },
        },
        series: [
          {
            name: "新增确诊",
            type: "bar",
            itemStyle: {
              color: "#ee6366",
            },
            data: [14, 3, 98],
            label: this.seriesLabel,
            itemStyle: {
              color: "red",
            },
            markPoint: {
              symbolSize: 1,
              symbolOffset: [0, "50%"],
              label: {
                formatter: "{a|新增确诊\n}{b|{b} }{c|{c}}",
                backgroundColor: "rgb(242,242,242)",
                borderColor: "#aaa",
                borderWidth: 1,
                borderRadius: 4,
                padding: [4, 10],
                lineHeight: 18,
                // shadowBlur: 5,
                // shadowColor: '#000',
                // shadowOffsetX: 0,
                // shadowOffsetY: 1,
                position: "right",
                distance: 20,
                rich: {
                  a: {
                    align: "center",
                    color: "#fff",
                    fontSize: 18,
                    textShadowBlur: 2,
                    textShadowColor: "#000",
                    textShadowOffsetX: 0,
                    textShadowOffsetY: 1,
                    textBorderColor: "#333",
                    textBorderWidth: 2,
                  },
                  b: {
                    color: "#333",
                  },
                  c: {
                    color: "#ff8811",
                    textBorderColor: "#000",
                    textBorderWidth: 1,
                    fontSize: 22,
                  },
                },
              },
              data: [
                { type: "max", name: "最大新增确证人数: " },
                { type: "min", name: "最小新增确证人数: " },
              ],
            },
          },
          {
            name: "境外输入",
            type: "bar",
            label: this.seriesLabel,
            itemStyle: {
              color: "#e6a23c",
            },
            data: [2, 1, 0],
            markPoint: {
              symbolSize: 1,
              symbolOffset: [0, "50%"],
              label: {
                formatter: "{a|境外输入\n}{b|{b} }{c|{c}}",
                backgroundColor: "rgb(242,242,242)",
                borderColor: "#aaa",
                borderWidth: 1,
                borderRadius: 4,
                padding: [4, 10],
                lineHeight: 18,
                // shadowBlur: 5,
                // shadowColor: '#000',
                // shadowOffsetX: 0,
                // shadowOffsetY: 1,
                position: "right",
                distance: 20,
                rich: {
                  a: {
                    align: "center",
                    color: "#fff",
                    fontSize: 18,
                    textShadowBlur: 2,
                    textShadowColor: "#000",
                    textShadowOffsetX: 0,
                    textShadowOffsetY: 1,
                    textBorderColor: "#333",
                    textBorderWidth: 2,
                  },
                  b: {
                    color: "#333",
                  },
                  c: {
                    color: "#ff8811",
                    textBorderColor: "#000",
                    textBorderWidth: 1,
                    fontSize: 22,
                  },
                },
              },
              data: [
                { type: "max", name: "最大境外输入人数: " },
                { type: "min", name: "最小境外输入人数: " },
              ],
            },
          },
          {
            name: "无症状感染者",
            type: "bar",
            label: this.seriesLabel,
            itemStyle: {
              color: "#d3dce6",
            },
            data: [202, 25, 20],
            markPoint: {
              symbolSize: 1,
              symbolOffset: [0, "50%"],
              label: {
                formatter: "{a|无症状感染者\n}{b|{b} }{c|{c}}",
                backgroundColor: "rgb(242,242,242)",
                borderColor: "#aaa",
                borderWidth: 1,
                borderRadius: 4,
                padding: [4, 10],
                lineHeight: 18,
                // shadowBlur: 5,
                // shadowColor: '#000',
                // shadowOffsetX: 0,
                // shadowOffsetY: 1,
                position: "right",
                distance: 20,
                rich: {
                  a: {
                    align: "center",
                    color: "#fff",
                    fontSize: 18,
                    textShadowBlur: 2,
                    textShadowColor: "#000",
                    textShadowOffsetX: 0,
                    textShadowOffsetY: 1,
                    textBorderColor: "#333",
                    textBorderWidth: 2,
                  },
                  b: {
                    color: "#333",
                  },
                  c: {
                    color: "#ff8811",
                    textBorderColor: "#000",
                    textBorderWidth: 1,
                    fontSize: 22,
                  },
                },
              },
              data: [
                { type: "max", name: "最大无症状感染者: " },
                { type: "min", name: "最小无症状感染者: " },
              ],
            },
          },
        ],
      };
    },
    getOptionThere() {
      return {
        title: {
          text: "全国 总新增确诊/治疗 趋势",
          subtext: "数据来自中国疫情网",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            animation: false,
          },
        },
        legend: {
          data: ["疫情确诊人数", "疫情治疗人数"],
          left: 10,
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            restore: {},
            saveAsImage: {},
          },
        },
        axisPointer: {
          link: { xAxisIndex: "all" },
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 30,
            end: 70,
            xAxisIndex: [0, 1],
          },
          {
            type: "inside",
            realtime: true,
            start: 30,
            end: 70,
            xAxisIndex: [0, 1],
          },
        ],
        grid: [
          {
            left: 50,
            right: 50,
            height: "35%",
          },
          {
            left: 50,
            right: 50,
            top: "55%",
            height: "35%",
          },
        ],
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: true },
            data: this.epidemicTime,
          },
          {
            gridIndex: 1,
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: true },
            data: this.epidemicTime,
            position: "top",
          },
        ],
        yAxis: [
          {
            name: "确诊人数(/例)",
            type: "value",
            max: 100000,
          },
          {
            gridIndex: 1,
            name: "治疗人数(/例)",
            type: "value",
            inverse: true,
          },
        ],
        series: [
          {
            name: "确诊",
            type: "line",
            symbolSize: 8,
            hoverAnimation: false,
            data: this.epidemicDiagnosed,
          },
          {
            name: "治疗",
            type: "line",
            xAxisIndex: 1,
            yAxisIndex: 1,
            symbolSize: 8,
            hoverAnimation: false,
            data: this.epidemicCured,
          },
        ],
      };
    },
    // initEcharts() {
    //   let newPromise = new Promise((resolve) => {
    //     resolve();
    //   });
    //   //然后异步执行echarts的初始化函数
    //   newPromise.then(() => {
    //     //	此dom为echarts图标展示dom
    //     echarts.init(dom);
    //   });
    // },
    toDrawOne() {
      let chart = echarts.init(document.getElementById("currenAdd"));
      let option = this.getOptionOne();
      chart.setOption(option);
    },
    toDrawOne2() {
      let chart2 = echarts.init(document.getElementById("currenAddTwo"));
      let option2 = this.getOptionOne2();
      chart2.setOption(option2);
    },
    toDrawTwo() {
      let chart1 = echarts.init(document.getElementById("current"));
      let option1 = this.getOptionTwo();
      chart1.setOption(option1);
    },
    toDrawThere() {
      let chart3 = echarts.init(document.getElementById("current1"));
      let option3 = this.getOptionThere();
      chart3.setOption(option3);
    },
  },
  created() {
    // console.log(currentdata);
    this.epidemicCured = epidemiccured;
    this.epidemicDiagnosed = epidemicdiagnosed;
    this.epidemicTime = epidemictime;
    this.currentepidemicData = currentdata;
    this.epidemicData = data;
  },
  mounted() {
    this.toDrawOne();
    this.toDrawTwo();
    this.toDrawThere();
  },
};
</script>
<style scoped>
#currenAdd {
  height: 800px;
  width: 1300px;
  margin-bottom: 50px;
}
#current {
  height: 800px;
  width: 1400px;
  border: 2px solid #f8f8f8;
  padding: 15px;
}
#currenAddTwo {
  height: 800px;
  width: 1300px;
}
.tagDiv {
  margin-right: 20px;
}
.epidemicDiv {
  height: 150px;
  padding: 15px;
  margin-bottom: 20px;
  position: relative;
}
.spanDiv {
  display: inline-block;
  font-size: 25px;
  color: #00b38a;
}
.spanDiv:before {
  content: "";
  position: absolute;
  height: 30px;
  border-radius: 999em;
  width: 3px;
  left: 10px;
  top: 17px;
  background-color: #00b38a;
}
.grid-content {
  margin-top: 10px;
  height: 30px;

  text-align: center;
  line-height: 30px;
  font-size: 20px;
}
.sizeDiv {
  text-align: center;
  line-height: 30px;
  font-size: 30px;
  font-weight: bold;
}
.numDiv {
  text-align: center;
  line-height: 30px;
}
#current1 {
  height: 800px;
  width: 1300px;
  margin-top: 20px;
  padding: 15px;
}
</style>